import React, { Component, PropTypes } from 'react';
import { Row, Col } from 'antd';
import { connect } from 'react-redux';
import moment from 'moment';

import './education.less';

const mapStateToProps = ({
  retailFeatureList: { currentDataDate, selectedTrader },
  retailAccountAssets: { educationDocs },
}) => ({
  trader: selectedTrader.trader,
  dataDate: moment(currentDataDate).format('YYYY-MM-DD'),
  data: educationDocs,
});

const mapDispatchToProps = {
  getEducationDocs: query => ({
    type: 'retailAccountAssets/getEducationDocs',
    payload: query || {},
  }),
};

@connect(mapStateToProps, mapDispatchToProps)
class Education extends Component {
  static propTypes = {
    trader: PropTypes.string.isRequired,
  }
  componentDidMount() {
    this.getData(this.props);
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.trader !== this.props.trader) {
      this.getData(nextProps);
    }
  }
  getData({ trader, dataDate, getEducationDocs }) {
    getEducationDocs({ trader, dataDate });
  }
  render() {
    const { data } = this.props;
    return (
      <div className="education" style={{ padding: '20px 12px' }}>
        { (data==null)?<div>暂无数据</div>:data.hits.hits.map((doc,i) => {
          return (
            <div key={i} className="doc">
              <h4><a href={doc._source.url} target="_blank" >{doc._source.title}</a></h4>
              <div>
                {
                  doc.highlight.content.map((cont,j) => {
                    return (<div key={j} className="content" dangerouslySetInnerHTML={{ __html: cont+'...' }} />);
                  })
                }
              </div>
              <div className="line" />
          </div>);
        })}
      </div>
    );
  }
}

export default Education;
